import React from 'react';
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
import Document, { Head, Html, Main, NextScript } from 'next/document';
import type { DocumentContext } from 'next/document';

const MyDocument = () => (
	<Html lang="zh-CN">
		<Head />
		<body>
			<Main />
			<NextScript />
		</body>
	</Html>
);

MyDocument.getInitialProps = async (ctx: DocumentContext) => {
	const cache = createCache();
	const originalRenderPage = ctx.renderPage;
	ctx.renderPage = () =>
		originalRenderPage({
			enhanceApp: (App) => (props) =>
				(
					<StyleProvider cache={cache}>
						<App {...props} />
					</StyleProvider>
				)
		});

	const initialProps = await Document.getInitialProps(ctx);
	const style = extractStyle(cache, true);
	return {
		...initialProps,
		styles: (
			<>
				{initialProps.styles}
				<style data-antd="true" dangerouslySetInnerHTML={{ __html: style }} />
			</>
		)
	};
};

export default MyDocument;

// import { Html, Head, Main, NextScript } from 'next/document';

// export default function Document() {
// 	return (
// 		<Html lang="zh-CN">
// 			<Head>
// 			</Head>
// 			<body>
// 				<Main></Main>
// 				<NextScript></NextScript>
// 			</body>
// 		</Html>
// 	);
// }
